<template>
  <div id="sellerOrderList">
    <h3>订单数据</h3>
    <div class="search">
      <el-select v-model="searchData.type" size="mini">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-if="searchData.type == 'userName'"
        v-model="searchData.nameData"
        placeholder="请输入内容123123"
        size="mini"
      ></el-input>
      <el-input
        v-else
        v-model="searchData.timeData"
        placeholder="请输入内容"
        size="mini"
      ></el-input>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部订单" name="all">
          <SellerOrderData />
        </el-tab-pane>
        <el-tab-pane label="未支付" name="payoff">
          <SellerOrderData />
        </el-tab-pane>
        <el-tab-pane label="已支付" name="paid">
          <SellerOrderData />
        </el-tab-pane>
        <el-tab-pane label="退保申请" name="toCancel">
          <SellerOrderData />
        </el-tab-pane>
        <el-tab-pane label="退保中" name="toCanceling">
          <SellerOrderData />
        </el-tab-pane>
        <el-tab-pane label="已退保" name="toCanceled">
          <SellerOrderData />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagesData.currentPage"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="pagesData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagesData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import SellerOrderData from "./SellerOrderData.vue";
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
  "Sellers"
);
export default {
  components: {
    SellerOrderData,
  },
  data() {
    return {
      id: localStorage.salesmansId,
      activeName: "all",
      options: [
        {
          value: "userName",
          label: "姓名",
        },
        {
          value: "ordersTime",
          label: "时间",
        },
      ],
      searchData: {
        type: "ordersTime",
        timeData: "",
        nameData: "",
      },
    };
  },
  created() {
    this.getSellersOrderById({
      _id: this.id,
    });
  },

  computed: {
    ...mapState(["pagesData"]),
  },

  methods: {
    ...mapActions(["getSellersOrderById"]),
    ...mapMutations(["changePageSize", "changeCurrentPage", "getsearch","getActive"]),

    handleClick(tab, event) {
      this.changeCurrentPage(1);
      this.getSellersOrderById({
        _id: this.id,
        active: this.activeName,
        searchData: this.searchData,
      });
    },

    handleSizeChange(val) {
      this.changePageSize(val);
      this.getSellersOrderById({
        _id: this.id,
        active: this.activeName,
        searchData: this.searchData,
      });
    },

    handleCurrentChange(val) {
      this.changeCurrentPage(val);
      this.getSellersOrderById({
        _id: this.id,
        active: this.activeName,
        searchData: this.searchData,
      });
    },
  },

  watch: {
    searchData: {
      handler(value) {
        this.getsearch(value);
        this.changeCurrentPage(1);
        this.getSellersOrderById({
          _id: this.id,
        });
      },
      deep: true,
    },
    activeName:{
      handler(value) {
        this.getActive (value)
      },
      deep: true,
    }

  },
};
</script>

<style lang="scss">
#sellerOrderList {
  h3 {
    margin-bottom: 10px;
  }
  .el-button {
    margin: 5px;
  }
  .el-table th,
  .el-table td {
    text-align: center;
    padding: 5px 0;
  }
  .search {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    .el-select {
      width: 80px;
      margin-right: 5px;
      .el-input {
        width: 100%;
      }
    }
    .el-input {
      width: 30%;
    }
  }
  .avatar {
    width: 360px;
    height: 200px;
    display: block;
  }

  .el-form {
    padding: 30px 0;
    .input-box {
      display: flex;
      justify-content: space-evenly;
      .el-input {
        width: 260px;
      }
      .img-upload {
        h3 {
          margin-bottom: 10px;
        }
        text-align: center;
      }
    }
    .el-form-item__content {
      margin: 0;
    }
  }
}
</style>